
#aquarium {
position:absolute;
width: 954px;
height: 665px;
cursor:move;
background:url(../images/aquarium.jpg) no-repeat;

	#sprite {
		background: url(../images/aquarium_player.png) no-repeat 0 0
	}

	#shadow  {
		width: 122px;
		height: 102px;
		background: url(../images/aquarium_shadow.png) no-repeat;
		left: -46px;
		top: -29px
	}
	
	#fish,
	#fish_click_area {
		position: absolute;
		left: -129px;
		top: -84px
	}
	
	#fish {
		width: 240px;
		height: 240px;
		background: url(../images/aquarium_fish.png) no-repeat;

		.text_cloud {
			left: 100px;
			bottom: 200px
		}
	}
	
	#fish_click_area {
		.translate(20px, 30px);
		width: 180px;
		height: 180px;
		border-radius:120px;
		z-index:1000;
		cursor:pointer
	}
	
	#floor {
		width: 927px;
		height: 517px;
		position:absolute;
		right: 121px;
		bottom: 184px;                              
	}

	#teleport {
		left: 686px;
		top: 479px;
	}
	
	#exit {
		.exit_teleport;
		top: 484px;
		left: 770px;
	}
	
	#gate_left {
		.item(
			328px,
			-73px,
			990,
			
			445px,
			797px,
			
			e(" url(../images/aquarium_gate_left.png) ")
		)
	}
	
	#gate_right {
		.item(
			667px,
			-27px,
			0,
			
			361px,
			431px,
			
			e(" url(../images/aquarium_gate_right.png) ")
		)
	}
	
	#rock_1 {
		.item(
			525px,
			139px,
			94,
			
			49px,
			114px,
			
			e(" url(../images/aquarium_rock_1.png) ")
		)
	}
	
	#rock_2 {
		.item(
			304px,
			129px,
			78,
			
			102px,
			157px,
			
			e(" url(../images/aquarium_rock_2.png) ")
		)
	}
	
	#rock_3 {
		.item(
			436px,
			72px,
			48,
			
			75px,
			104px,
			
			e(" url(../images/aquarium_rock_3.png) ")
		)
	}
	
	#rock_4 {
		.item(
			254px,
			25px,
			28,
			
			69px,
			135px,
			
			e(" url(../images/aquarium_rock_4.png) ")
		)
	}
	
	#rock_4_mask {
		.item (
			220px,
			25px,
			21,

			34px,
			135px,
			
			e(" url(../images/aquarium_rock_4.png) ")
		);
		background-position: 0 0
	}
	
	#rock_5 {
		.item(
		177px,
		143px,
		49,
		
		71px,
		118px,
		
		e(" url(../images/aquarium_rock_5.png) ")
		)
	}

	#key {
		.item (
		688px,
		408px,
		2000,

		37px,
		27px,
		
		e(" url(../images/aquarium_key.png) ")
		);
		cursor:pointer
	}
	
}

//animate gate
@-webkit-keyframes gate_float {
	0% {-webkit-transform: translate(0, 10px);}
	50% {-webkit-transform: translate(0, 0);}
	100% {-webkit-transform: translate(0, 10px);}
} 
#gate_left,
#gate_right {
	-webkit-animation: gate_float 10s ease-in;
	-webkit-animation-iteration-count: infinite;
}
@-moz-keyframes gate_float {
	0% {-moz-transform: translate(0, 10px);}
	50% {-moz-transform: translate(0, 0);}
	100% {-moz-transform: translate(0, 10px);}
}
#gate_left,
#gate_right {
	-moz-animation: gate_float 10s ease-in;
	-moz-animation-iteration-count: infinite;
}
@-o-keyframes gate_float {
	0% {-o-transform: translate(0, 10px);}
	50% {-o-transform: translate(0, 0);}
	100% {-o-transform: translate(0, 10px);}
}
#gate_left,
#gate_right {
	-o-animation: gate_float 10s ease-in;
	-o-animation-iteration-count: infinite;
}
@-ms-keyframes gate_float {
	0% {-ms-transform: translate(0, 10px);}
	50% {-ms-transform: translate(0, 0);}
	100% {-ms-transform: translate(0, 10px);}
}
#gate_left,
#gate_right {
	-ms-animation: gate_float 10s ease-in;
	-ms-animation-iteration-count: infinite;
}
@keyframes gate_float {
	0% {transform: translate(0, 10px);}
	50% {transform: translate(0, 0);}
	100% {transform: translate(0, 10px);}
}
#gate_left,
#gate_right {
	animation: gate_float 10s ease-in;
	animation-iteration-count: infinite;
}